import React ,{lazy,Suspense}from 'react';
import {connect} from 'react-redux';
import action from '../../../store/action';
import {Switch,Route,Redirect} from 'react-router-dom';
import IScroll from '../../../assets/js/utils/iscroll';
import Css from '../../../assets/css/home/goods/index.css';
import {LocalParam,goBack,isSystem} from "../../../assets/js/utils";
const GoodsItems=lazy(()=>import('./items'));
const SearcgComponemt=lazy(()=>import('../../../components/search/search'))
class goodsIndex extends React.Component{
    constructor(props){
        super(props);
        this.state={
            aClassify:[]
        }
        this.myScroll=null;
        this.cid=props.location.search?LocalParam(props.location.search).search.cid:'492';
    }
    componentDidMount(){
        this.getClassifydata()
    }
    //滚动
    eventIscroll(){
            document.getElementById("iscrollClassify").addEventListener('touchmove', function (e) {
                e.preventDefault();
            }, false);
            this.myScroll = new IScroll('#iscrollClassify', {
                scrollX: false,
                scrollY: true,
                preventDefault: false
            });
    }
    //返回
    goBack(){
        goBack(this.props)
    }
    //进入不记录历史页面
    replacePage(url){
        this.props.history.replace(window.base.config.path+url)
    }
    //获取分类数据
    getClassifydata(){
        this.props.dispatch(action.actClassify.actClassify({
            success:()=>{
                this.eventIscroll();
                this.defaultClassifyStyle();
            }
        }))
    }
    //页面离开时移除滚动监听事件
    componentWillUnmount(){
        this.setState = (state, callback) => {
            return;
        };
    }
    //点击切换数据
    OnChangeStyle(pUrl,pIndex){
        //点击选中
        let aClassify=this.props.state.redClassify.aClassify
        for (let i in aClassify){
            aClassify[i].bActive=false
        }
        aClassify[pIndex].bActive=true;
        this.handsScroll(pIndex)
        //点击跳转
        this.replacePage(pUrl)
    }
    //默认选中样式
    defaultClassifyStyle(){
        let aClassify=this.props.state.redClassify.aClassify
        for (let i in aClassify){
            if (aClassify[i].cid===this.cid){
                aClassify[i].bActive=true;
            }
        }
        this.setState({aClassify:aClassify})
    }
    //点击滚动
    handsScroll(pIndex){
        // 获取id
        let oScrollClassify=document.getElementById("iscrollClassify");
        //获取id在屏幕中显示的高
        let iHeight=Math.round(parseInt(oScrollClassify.offsetHeight));
        // 获取id的整个高
        let iAllheight=oScrollClassify.scrollHeight;
        //获取每个类别距离顶部的高
        let iTopHeight=Math.round(parseInt(this.refs['aClassify'+pIndex].offsetHeight+1)*pIndex);
        //获取每个类别距离底部的高
        let iBottomHeight=iAllheight-iTopHeight
        if(iTopHeight>iHeight/3&&iBottomHeight>iHeight){
            this.myScroll.scrollTo(0 ,-iTopHeight,100)
        }
    }
    //显示seach组件
    changePageStyle(){
        this.setState({bPageStyle:true})

    }
    //隐藏seach组件
    getPageStyle(val){
        this.setState({bPageStyle:val})
    }
    render(){
        return(
            <div>
                <SearcgComponemt pageStyle={this.state.bPageStyle?"block":"none"} getPageStyle={this.getPageStyle.bind(this)}></SearcgComponemt>

                <div className={Css['goodsTop']}>
                    <div className={Css['goodsGobackIcn']} onClick={this.goBack.bind(this)}><i className={'goBackIcn fs50'} /> </div>
                    <div className={Css['goodsSearch']+' fs28'} onClick={this.changePageStyle.bind(this)}>请输入宝贝名称</div>
                </div>
                <div className={Css['goodsMain']}>
                    <div id={'iscrollClassify'} className={Css['goodsMainNav']}>
                        <ul>
                            {

                                this.props.state.redClassify.aClassify!=null?this.props.state.redClassify.aClassify.map((item,index)=>{
                                    return(
                                        <li key={index} ref={'aClassify'+index} className={item.bActive?Css['active']:''} onClick={this.OnChangeStyle.bind(this,'goods/classify/items?cid='+item.cid,index)}>{item.title}</li>
                                    )
                                })
                                    :'没有分类'
                            }
                            {
                                isSystem()===1?
                                    <div style={{height:'1rem'}}></div>
                                    :''
                            }
                        </ul>
                    </div>
                    <div className={Css['goodsMainClassify']}>
                        <Suspense fallback={<React.Fragment/>} >
                            <Switch>
                                <Route path={window.base.config.path+'goods/classify/items'} component={GoodsItems}/>
                                <Redirect to={window.base.config.path+'goods/classify/items'}/>
                            </Switch>
                        </Suspense>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(goodsIndex);